<template>
  <div class="regs">
    <!-- 搜索 -->
    <div class="form_search">
      <el-form @submit.native.prevent>
        <el-input v-model="formR" placeholder="在此输入IMEI编号进行搜索" clearable></el-input>
      </el-form>
      <el-button type="primary" slot="append" @click="search" class="dev_search">搜索</el-button>
    </div>

    <el-row :gutter="20" class="forms">
      <el-tabs v-model="activeName" class="regWeight">
        
        <el-tab-pane label="出库管理" name="second">
          <outgo-manage v-if="activeName === 'second'" :messageOut="outImei" ref="outImei"></outgo-manage>
        </el-tab-pane>
        <el-tab-pane label="退库管理" name="third">
          <back-manage v-if="activeName === 'third'" :messageBack="backImei" ref="backImei"></back-manage>
        </el-tab-pane>
        <el-tab-pane label="入库管理" name="first" v-if="this.role[0].sort >= 80">
          <warehous-manage v-if='activeName === "first"' :messageWarehouse="getListImei" ref="getImei" ></warehous-manage>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</template>
<script>
import warehousManage from './Warehousing/warehousingManage'
import outgoManage from "./Outgoing/outgoingManage";
import backManage from "./Back/backManage";
import { mapGetters } from "vuex";

export default {
  components: {
    warehousManage,
    outgoManage,
    backManage
  },
  data() {
    return {
      getListImei: "", // 入库
      outImei: "", // 出库
      backImei: "", // 退库
      // 查询
      formR: "",
      //出库分配tab切换
      activeName: "second",
    };
  },
  computed: {
    ...mapGetters("user", {
      module: "dealedModule",
      user: "getUser",
      role: "getRole",
      district: "getDistrict"
    })
  },
  methods: {
    //搜索
    search() {
      // this.getListImei = this.formR;
      if(this.activeName === 'second'){
        this.$refs.outImei.dev_currentPage = 1;
        this.outImei = this.formR;
      }else if(this.activeName === 'third'){
        this.$refs.backImei.dev_currentPage = 1;
        this.backImei = this.formR;
      }else if(this.activeName === 'first'){
        this.$refs.getImei.dev_currentPage = 1;
        this.getListImei = this.formR;
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss"  >
.regs {
  // 搜索
  .form_search {
    width: 100%;
    height: 42px;
    margin-bottom: 16px;
    .el-form {
      width: 500px;
      float: left;
      height: 42px;
      line-height: 42px;
      box-shadow: 5px 5px 0px 0px rgba(34, 34, 34, 0.1);
      border: 0;
      .el-input {
        .el-input__inner {
          height: 42px;
          border-radius: 0;
          border: 0;
          line-height: 42px;
        }
        .el-input__inner:hover {
          border-color: 0;
        }
      }
    }
    .dev_search {
      width: 80px;
      height: 42px;
      background: rgba(235, 56, 56, 1);
      box-shadow: 5px 5px 0px 0px rgba(34, 34, 34, 0.1);
      padding: 0;
      border-radius: 0;
      font-size: 14px;
    }
  }
  //切换
  .el-tabs__item.is-active {
    color: #eb3838;
  }
  .el-tabs__item:hover {
    color: #eb3838;
  }
  .el-tabs__header {
    margin: 0;
  }
  .el-tabs__active-bar {
    background-color: #eb3838;
  }
  .forms .el-tabs__nav-scroll {
    background: rgb(246, 246, 246);
    padding-left: 30px;
  }
  .forms .el-tabs__nav-wrap::after {
    height: 0;
  }
  .forms .el-tabs__item.is-active {
    font-weight: 700;
  }
  .forms.el-row {
    margin: 0 !important;
    background: none;
  }
}
</style>
